import dynamic from 'next/dynamic'
import { getIdFromSlug, getNameFromSlug } from '@/core/utils/slug'
import { useRouter } from 'next/router'
import _ from 'lodash'
import Seo from '@/core/components/Seo'

const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
const ProductSearch = dynamic(() => import('@/lib/product/components/ProductSearch'))
const Brand = dynamic(() => import('@/lib/brand/components/Brand'))

export default function BrandDetail() {
  const router = useRouter()
  const { slug = '' } = router.query
  
  const brandName = getNameFromSlug(slug)
  return (
    <BasicLayout>
      <Seo
        title={`Distributor ${brandName} Indonesia Harga Official Indoteknik.com`}
        description='B2B Marketplace MRO &amp; Industri dengan Layanan Pembayaran Tempo, Faktur Pajak, Online Quotation, Garansi Resmi &amp; Harga Kompetitif'
        additionalMetaTags={[
          {
            property: 'keywords',
            content:
              `Jual ${brandName}, beli ${brandName}, Distributor ${brandName} Indonesia, cari ${brandName}, produk ${brandName}, ${brandName} Indonesia, harga ${brandName}`
          }
        ]}
      />

      <Brand id={getIdFromSlug(slug)} />
      {!_.isEmpty(router.query) && (
        <ProductSearch
          query={_.omit(router.query, 'slug')}
          prefixUrl={`/shop/brands/${slug}`}
          defaultBrand={getNameFromSlug(slug)}
        />
      )}
    </BasicLayout>
  )
}
